<template>
<div  class="content content_samll">
  <div class="home">
    <div class="home__news">
      <a-carousel autoplay dotPosition="bottom" class="home_news-images">
        <div class="images " style="width: 530px;" v-for="(news_item ,news_item_index) in news_swiper"  :key="news_item_index" @click="swiper_to_news(news_item)">
          <img :src="news_item.preimg" alt="">
          <span class="scroll-title">{{news_item.title}}</span>
        </div>
      </a-carousel>
      <div class="home_news-list">
        <a-tabs @change="change" class="home__news__tabs" v-model="activetab">
          <div slot="tabBarExtraContent" style="float: right;" @click="more_news">
            <span class="more cursor">更多
              <i aria-label="图标: right" class="anticon anticon-right">
                <svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor"
                  aria-hidden="true" focusable="false" class="">
                  <path
                    d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z">
                  </path>
                </svg>
              </i>
            </span>
          </div>
          <a-tab-pane key="0">
            <span slot="tab">
              <svg aria-hidden="true" class="svg-icon home-title-icon">
                <use xlink:href="#icon-home-more-news"></use>
              </svg>
              <span class="font-second-title">政策信息</span>
            </span>
            <ul class="home-news-list">
               <li class="home-news-list__li" v-for="(home_news_item ,home_news_item_index) in tabnews.Policyinformation"  :key="home_news_item_index" @click="link_to_news(home_news_item._id)">
                <div class="home-news-list__circle"></div>
                <div class="home-news-list__title home-news-list__txt">{{home_news_item.title}}</div>
                <div class="home-news-list__time">{{new Date(home_news_item.time).format("yyyy-MM-dd")}}</div>
              </li>
            </ul>
          </a-tab-pane>  
          <a-tab-pane key="1">
            <span slot="tab">
              <svg aria-hidden="true" class="svg-icon home-title-icon">
                <use xlink:href="#icon-home-more-trend"></use>
              </svg>
              <span class="font-second-title">工作动态</span>
            </span>
            <ul class="home-news-list">
              <li class="home-news-list__li" v-for="(home_news_trend_item ,home_news_trend_item_index) in  tabnews.Workdynamics"  :key="home_news_trend_item_index" @click="link_to_news(home_news_trend_item._id)">
                <div class="home-news-list__circle"></div>
                <div class="home-news-list__title">{{home_news_trend_item.title}}</div>
                <div class="home-news-list__time">{{new Date(home_news_trend_item.time).format("yyyy-MM-dd")}}</div>
              </li>
            </ul>
          </a-tab-pane>
          <a-tab-pane key="2">
            <span slot="tab">
              <svg aria-hidden="true" class="svg-icon home-title-icon">
                <use xlink:href="#icon-home-more-meiti"></use>
              </svg>
              <span class="font-second-title">基层信息</span>
            </span>
            <ul class="home-news-list">
              <li class="home-news-list__li" v-for="(home_news_media_item ,home_news_media_item_index) in tabnews.Grassrootsinformation"  :key="home_news_media_item_index" @click="link_to_news(home_news_media_item._id)">
                <div class="home-news-list__circle"></div>
                <div :class="['home-news-list__title', home_news_media_item.hasvideo?'home-news-list__video':'']">{{home_news_media_item.title}}</div>
                <div class="home-news-list__time">{{new Date(home_news_media_item.time).format("yyyy-MM-dd")}}</div>
              </li>
            </ul>
          </a-tab-pane>
          <a-tab-pane key="3">
            <span slot="tab">
              <svg aria-hidden="true" class="svg-icon home-title-icon">
                <use xlink:href="#icon-home-GEO"></use>
              </svg>
              <span class="font-second-title">区划变更</span>
            </span>
            <ul class="home-news-list">
              <li class="home-news-list__li" v-for="(home_news_change_item ,home_news_change_item_index) in tabnews.home_news_changes"  :key="home_news_change_item_index" @click="link_to_news(home_news_change_item._id)">
                <div class="home-news-list__circle"></div>
                <div class="home-news-list__title home-news-list__txt">{{home_news_change_item.title}}</div>
                <div class="home-news-list__time">{{new Date(home_news_change_item.time).format("yyyy-MM-dd")}}</div>
              </li>
            </ul>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <div  class="home__function">
      <div  class="home-title-wrapper">
        <p  class="home-title">
          <svg  aria-hidden="true" class="svg-icon home-title-icon">
            <use  xlink:href="#icon-home-icon-functions"></use>
          </svg>
          主要功能
        </p>
        <div class="home-title-line"></div>
      </div>
      <ul  class="home__wrapper">
        <li  class="home__wrapper-items cursor-noLink" @click="linkToo('/xzqh')">
          <div  class="funtion__item" style="background: url(&quot;&quot;) 0px 0px / 100% 100% no-repeat;">
            <div  class="function__wrapper-title">
              <span  class="funtion__items-title">行政区划查询</span>
              <br >
              <span  class="funtion__items-title funtion__items-s-title">Administrative Divisions Query</span>
            </div>
            <div  class="function__wrapper-imgs">
              <svg  aria-hidden="true" class="svg-icon function__wrapper-img">
                <use xlink:href="#icon-home-biaozhun"></use>
              </svg>
            </div>
          </div>
          <p class="home__wrapper-content" style="width: 100%;">对内蒙古自治区的盟市、旗县、乡镇行政区划进行查询和查看人口、面积等属性</p>
        </li>
        <li  class="home__wrapper-items cursor-noLink" @click="linkToo('/search')">
          <div  class="funtion__item" style="background: url(&quot;&quot;) 0px 0px / 100% 100% no-repeat;">
            <div class="function__wrapper-title">
              <span  class="funtion__items-title">地名查询</span>
              <br >
              <span class="funtion__items-title funtion__items-s-title">Geographic NameMonitoring Query</span>
            </div>
            <div  class="function__wrapper-imgs">
              <svg  aria-hidden="true" class="svg-icon function__wrapper-img">
                <use  xlink:href="#icon-home-jiance"></use>
              </svg>
            </div>
          </div>
          <p  class="home__wrapper-content" style="width: 100%;">
            对内蒙古自治区的地名进行查询和查看相应的属性
          </p>
        </li>
        <li  class="home__wrapper-items cursor-noLink" @click="linkToo('/services/wfs')">
          <div  class="funtion__item" style="background: url(&quot;&quot;) 0px 0px / 100% 100% no-repeat;">
            <div  class="function__wrapper-title">
              <span  class="funtion__items-title">服务资源</span>
              <br>
              <span  class="funtion__items-title funtion__items-s-title">Service Resources</span>
            </div>
            <div   class="function__wrapper-imgs">
              <svg  aria-hidden="true" class="svg-icon function__wrapper-img">
                <use  xlink:href="#icon-home-fugailv"></use>
              </svg>
            </div>
          </div>
          <p  class="home__wrapper-content" style="width: 100%;">
            查看本系统提供的公开对外服务资源
          </p>
        </li>
        <!-- <li data-v-3f4a98d4="" class="home__wrapper-items cursor-noLink">
          <div data-v-3f4a98d4="" class="funtion__item"
            style="background: url(&quot;&quot;) 0px 0px / 100% 100% no-repeat;">
            <div data-v-3f4a98d4="" class="function__wrapper-title"><span data-v-3f4a98d4=""
                class="funtion__items-title">影像推送统计</span><br data-v-3f4a98d4=""><span data-v-3f4a98d4=""
                class="funtion__items-title funtion__items-s-title">Image Push Statistics</span></div>
            <div data-v-3f4a98d4="" class="function__wrapper-imgs"><svg data-v-42580838="" data-v-3f4a98d4=""
                aria-hidden="true" class="svg-icon function__wrapper-img">
                <use data-v-42580838="" xlink:href="#icon-home-shuju"></use>
              </svg></div>
          </div>
          <p data-v-3f4a98d4="" class="home__wrapper-content">
            用户可对系统推送的历史批次数据进行查询和查看信息
          </p>
        </li>
        <li data-v-3f4a98d4="" class="home__wrapper-items cursor-noLink">
          <div data-v-3f4a98d4="" class="funtion__item"
            style="background: url(&quot;&quot;) 0px 0px / 100% 100% no-repeat;">
            <div data-v-3f4a98d4="" class="function__wrapper-title"><span data-v-3f4a98d4=""
                class="funtion__items-title">轨道预测</span><br data-v-3f4a98d4=""><span data-v-3f4a98d4=""
                class="funtion__items-title funtion__items-s-title">Orbit Prediction</span></div>
            <div data-v-3f4a98d4="" class="function__wrapper-imgs"><svg data-v-42580838="" data-v-3f4a98d4=""
                aria-hidden="true" class="svg-icon function__wrapper-img">
                <use data-v-42580838="" xlink:href="#icon-home-guidao"></use>
              </svg></div>
          </div>
          <p data-v-3f4a98d4="" class="home__wrapper-content">
            用户可查询选定区域和时间范围内各卫星的过境信息
          </p>
        </li> -->
      </ul>
    </div>
    <!-- <div  class="home-dynamic-analysis home__typical">
      <div class="home__typical__row">
        <div class="home__typical__title">
          <div data-v-6b79ec96="" class="home-title-wrapper">
            <p data-v-6b79ec96="" class="home-title"><svg data-v-42580838="" data-v-6b79ec96="" aria-hidden="true"
                class="svg-icon home-title-icon">
                <use data-v-42580838="" xlink:href="#icon-home-icon-dynamic"></use>
              </svg>
              动态分析
            </p>
            <div data-v-6b79ec96="" class="home-title-line"></div>
          </div>
        </div><span class="home__typical__more">
          更多<i aria-label="图标: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right"
              width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
              <path
                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z">
              </path>
            </svg></i></span>
      </div>
      <ul class="home-dynamic-analysis__pic-wrapper">
        <li class="home-dynamic-analysis__pic"><img src="http://www.sasclouds.com/chinese/img/dynamic-analysis-1.5cc3e881.png">
          <div class="home-dynamic-analysis__label">总体统计</div>
        </li>
        <li class="home-dynamic-analysis__pic"><img src="http://www.sasclouds.com//chinese/img/country-analysis-1.8b287672.png">
          <div class="home-dynamic-analysis__label">国别分析</div>
        </li>
        <li class="home-dynamic-analysis__pic"><img src="http://www.sasclouds.com//chinese/img/categories-statistic-1.28058372.png">
          <div class="home-dynamic-analysis__label">类别统计</div>
        </li>
        <li class="home-dynamic-analysis__pic"><img src="http://www.sasclouds.com//chinese/img/investment-pattern-analysis.6bc79ca2.png">
          <div class="home-dynamic-analysis__label">投资模式分析</div>
        </li>
        <li class="home-dynamic-analysis__pic"><img src="http://www.sasclouds.com//chinese/img/level-contrast-1.553c5f41.png">
          <div class="home-dynamic-analysis__label">水平对比</div>
        </li>
      </ul>
    </div>
    <div  class="home__typical">
      <div data-v-3f4a98d4="" class="home__typical__row">
        <div data-v-3f4a98d4="" class="home__typical__title">
          <div data-v-6b79ec96="" data-v-3f4a98d4="" class="home-title-wrapper">
            <p data-v-6b79ec96="" class="home-title"><svg data-v-42580838="" data-v-6b79ec96="" aria-hidden="true"
                class="svg-icon home-title-icon">
                <use data-v-42580838="" xlink:href="#icon-home-icon-typical"></use>
              </svg>
              典型影像
            </p>
            <div data-v-6b79ec96="" class="home-title-line"></div>
          </div>
        </div><span data-v-3f4a98d4="" class="home__typical__more">
          更多<i data-v-3f4a98d4="" aria-label="图标: right" class="anticon anticon-right"><svg data-v-3f4a98d4=""
              viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"
              focusable="false" class="">
              <path
                d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z">
              </path>
            </svg></i></span>
      </div>
      <ul data-v-3f4a98d4="" class="home__typical-wrapper">
        <li data-v-3f4a98d4="" class="home__typical-image"><img data-v-3f4a98d4=""
            src="http://www.sasclouds.com/chinese/img/ZY3MUX.74b12811.png"><span data-v-3f4a98d4=""
            class="home-image-title  inline-block  cursor-noLink "><span data-v-3f4a98d4=""
              class="inline-block">资源三号多光谱样例</span><br data-v-3f4a98d4=""><i data-v-3f4a98d4=""
              aria-label="图标: right-circle" class="anticon anticon-right-circle" style="font-size: 20px;"><svg
                data-v-3f4a98d4="" viewBox="64 64 896 896" data-icon="right-circle" width="1em" height="1em"
                fill="currentColor" aria-hidden="true" focusable="false" class="">
                <path
                  d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z">
                </path>
                <path
                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z">
                </path>
              </svg></i></span></li>
        <li data-v-3f4a98d4="" class="home__typical-image"><img data-v-3f4a98d4=""
            src="http://www.sasclouds.com/chinese/img/ZY3NAD.f672a945.png"><span data-v-3f4a98d4=""
            class="home-image-title inline-block cursor-noLink"><span data-v-3f4a98d4=""
              class="inline-block">资源三号全色样例</span><br data-v-3f4a98d4=""><i data-v-3f4a98d4=""
              aria-label="图标: right-circle" class="anticon anticon-right-circle" style="font-size: 20px;"><svg
                data-v-3f4a98d4="" viewBox="64 64 896 896" data-icon="right-circle" width="1em" height="1em"
                fill="currentColor" aria-hidden="true" focusable="false" class="">
                <path
                  d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z">
                </path>
                <path
                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z">
                </path>
              </svg></i></span></li>
        <li data-v-3f4a98d4="" class="home__typical-image"><img data-v-3f4a98d4=""
            src="http://www.sasclouds.com/chinese/img/y2-2.7da9d519.png"><span data-v-3f4a98d4=""
            class="home-image-title inline-block  cursor-noLink"><span data-v-3f4a98d4=""
              class="inline-block">高分一号样例</span><br data-v-3f4a98d4=""><i data-v-3f4a98d4=""
              aria-label="图标: right-circle" class="anticon anticon-right-circle" style="font-size: 20px;"><svg
                data-v-3f4a98d4="" viewBox="64 64 896 896" data-icon="right-circle" width="1em" height="1em"
                fill="currentColor" aria-hidden="true" focusable="false" class="">
                <path
                  d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z">
                </path>
                <path
                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z">
                </path>
              </svg></i></span></li>
        <li data-v-3f4a98d4="" class="home__typical-image"><img data-v-3f4a98d4=""
            src="http://www.sasclouds.com/chinese/img/y3-3.c7fec86f.png"><span data-v-3f4a98d4=""
            class="home-image-title inline-block  cursor-noLink"><span data-v-3f4a98d4=""
              class="inline-block">高分二号样例</span><br data-v-3f4a98d4=""><i data-v-3f4a98d4=""
              aria-label="图标: right-circle" class="anticon anticon-right-circle" style="font-size: 20px;"><svg
                data-v-3f4a98d4="" viewBox="64 64 896 896" data-icon="right-circle" width="1em" height="1em"
                fill="currentColor" aria-hidden="true" focusable="false" class="">
                <path
                  d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z">
                </path>
                <path
                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z">
                </path>
              </svg></i></span></li>
        <li data-v-3f4a98d4="" class="home__typical-image"><img data-v-3f4a98d4=""
            src="http://www.sasclouds.com/chinese/img/y4-4.6c2b5521.png"><span data-v-3f4a98d4=""
            class="home-image-title inline-block  cursor-noLink"><span data-v-3f4a98d4=""
              class="inline-block">高分四号样例</span><br data-v-3f4a98d4=""><i data-v-3f4a98d4=""
              aria-label="图标: right-circle" class="anticon anticon-right-circle" style="font-size: 20px;"><svg
                data-v-3f4a98d4="" viewBox="64 64 896 896" data-icon="right-circle" width="1em" height="1em"
                fill="currentColor" aria-hidden="true" focusable="false" class="">
                <path
                  d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z">
                </path>
                <path
                  d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z">
                </path>
              </svg></i></span></li>
      </ul>
    </div> -->
  </div>
</div>
  
</template>
<script>
  import Bus from '../../src/bus.js';
  import $ from 'jquery';
  export default {
    components: {},
    data() {
      return {
        news_swiper: [],
        activetab:"0",
        routes:['/platform/newsList/notic/','/platform/newsList/trend/','/platform/newsList/media/','/platform/newsList/change/'],
        tabnews:{
          Policyinformation:[],
          Workdynamics:[],
          Grassrootsinformation:[],
          home_news_changes:[],
        },
      }
    },
    mounted() {
      this.GetHomes();
    },
    methods: {
      swiper_to_news(news_item){
        if(news_item ){
          let path=`${this.routes[parseInt(news_item.baseroute)]}detail/${news_item._id}`
          this.$router.push({
            path: path,
          })
        }
      },
      link_to_news(itemid){
        if(itemid ){
          let path=`${this.routes[parseInt(this.activetab)]}detail/${itemid}`
          this.$router.push({
            path: path,
          })
        }
      },
      more_news(){
        let path=`${this.routes[parseInt(this.activetab)]}list`
           this.$router.push({
            path: path,
          })
      },
      GetHomes(){
        this.getnews_swiper();
        this.getnews('政策信息');
        this.getnews('工作动态');
        this.getnews('基层信息');
        this.getnews('行政区划变更');
      },
      getnews(type){
        let that=this;
        let ajaxSet={
          type:"post",
          async:true,
          dataType:"json",
          url:window.Glod.ajax+'xzqh/search_news?',
          data:{
              type:type,
              pageSize:7,
              pageNum:1,
          }
        }
        $.ajax(ajaxSet)
        .then(databack=>{
            if(databack.status==true){
              if(type=='政策信息'){
                that.tabnews.Policyinformation=databack.result.data
              }
              else if(type=='工作动态'){
                that.tabnews.Workdynamics=databack.result.data
              }
              else if(type=='基层信息'){
                that.tabnews.Grassrootsinformation=databack.result.data
              }
               else if(type=='行政区划变更'){
                that.tabnews.home_news_changes=databack.result.data
              }
            }
            else{
                that.$message.error('查询新闻失败');
            }
        },error=>{
                that.$message.error('查询新闻失败');
            }
        );
      },
      getnews_swiper(){
        let that=this;
        let ajaxSet={
          type:"post",
          async:true,
          dataType:"json",
          url:window.Glod.ajax+'xzqh/search_news_swiper?',
        }
        $.ajax(ajaxSet)
        .then(databack=>{
            if(databack.status==true){
              let news_swiper=[]
              databack.result.forEach(element => {
                let baseroute=element.type=='政策信息'?0:element.type=='工作动态'?1:element.type=='基层信息'?2:3;
                news_swiper.push({
                  _id:element._id,
                  baseroute,
                  title:element.title,
                  preimg:element.preimg,
                })
              });
              that.news_swiper=news_swiper
            }
        });
      },
      linkToo(route){
        this.$router.push({
            path: route,
          })
      },
      change(activeKey){
      },
    },
  }
</script>